import { Box, Button, CircularProgress } from "@mui/material";
import { green } from "@mui/material/colors";
import React from "react";

export default function MyButton(props) {
  return (
    <Box sx={{ m: 1, position: "relative" }}>
      <Button
        variant="contained"
        // sx={buttonSx}
        disabled={props.loading}
        onClick={props.onClick}
      >
        {props.children}
      </Button>
      {props.loading && (
        <CircularProgress
          size={24}
          sx={{
            color: green[500],
            position: "absolute",
            top: "50%",
            left: "50%",
            marginTop: "-12px",
            marginLeft: "-12px",
          }}
        />
      )}
    </Box>
  );
}
